<template >
	<view :style="bj">
		<view @click="Colorclick" style="float: right;position: relative;top:10%;right: 5%;border-bottom: 1px dashed  #FFFFFF;">
			<h3 style="color: #aaff7f;float: right;position: relative;top:10%;right: 5%;border-bottom: 1px dashed    #FFFFFF;">
				肤
			</h3>
			<h3 style="color: #ffff7f;float: right;position: relative;top:10%;right: 5%;border-bottom: 1px dashed    #FFFFFF;">
				换
			</h3>
			<h3 style="color: #55ffff;float: right;position: relative;top:10%;right: 5%;border-bottom: 1px dashed    #FFFFFF;">
				统
			</h3>
			<h3 style="color: #55ff00;float: right;position: relative;top:10%;right: 5%;border-bottom: 1px dashed    #FFFFFF;">
				系
			</h3>
			<h3 style="color: #3e95ff;float: right;position: relative;top:10%;right: 5%;border-bottom: 1px dashed    #FFFFFF;">
				<Am-FontAwesome type="fas fa-palette"  fw color="#a9ff9c"></Am-FontAwesome>
			</h3>
		</view>
		<view class="login-img">
			<view class="owl-login"  :class="hideEyes?'password':''">
				<view class="hand"></view>
				<view class="hand hand-r"></view>
				<view class="arms">
					<view class="arm"></view>
					<view class="arm arm-r"></view>
				</view>
			</view>
		</view>
		<view class="login-form">
			<form @submit="formSubmit" @reset="formReset">
					<span @click="versionclick" :style="serverconfig1" class="version">当前版本:{{this.version}}</span>
					<span  class="version1" :style="serverconfig1" @click="tigerclick" >切换用户
					<Am-FontAwesome type="fas fa-angle-down"  fw color=color></Am-FontAwesome>
					</span>
				<view class="form-input">
					<input type="text"  :style="xhx" @input="removePws" class="input1" :value="form.username" id="editor" name="username" placeholder="用户名" @focus="passwordF_B" @blur="passwordF_B"  />
				<switch class="switch" :color="color" :checked="flag" @change.stop="switch1Change" />
				<view style="float: right;">
								<checkbox-group  @change="checkboxChange">
				                <checkbox
				                    type="checkbox"
				                    :checked="rememberPsw"
				                    :color="color"
				                >
				                 <text  :style="fontcolor">记住密码</text>
				                </checkbox>
				            </checkbox-group>
				</view>
				</view>
				<view  class="form-input">
					<input :type="type" :style="xhx" :value="form.password" class="input2"  id="editor" name="password" placeholder="密码" @focus="passwordF_B" @blur="passwordF_B" />
				</view>
				<button :style="chonzhi"  class="wrapper" type="default" form-type="reset">
				重&nbsp;&nbsp;置
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				</button>
				<button :style="denglu"  class="wrapper" type="primary"  form-type="submit">
					登&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;录
					<span></span>
					<span></span>
					<span></span>
					<span></span>
				</button>
				<view class="serverconfig" :style="serverconfig1" @click="tabclick">
					服务器配置
				<Am-FontAwesome type="fab fa-whmcs"  fw color=color></Am-FontAwesome>
				</view>
			</form>
			<view class="serverconfig1" :style="serverconfig1"  @click="CreateCode">软件分享
			<Am-FontAwesome type="fas fa-barcode"  fw color=color></Am-FontAwesome>
			</view>
		
		</view>
		<!-- 启动翻滚文字 -->
		<!-- <dazhuangSubtitleScrolling :lists="lists"  :width="width" :height='height' :background='background' :color='color' :speed='speed' /> -->
		<prompt :visible.sync="promptVisible" :flag="isflag" :title="title"   style="z-index: 1;" placeholder="输入服务器地址" :isMutipleLine="isMutipleLine" :defaultValue="url"
			@confirm="clickPromptConfirm" :backgroundColor="color" :mainColor="color">
		</prompt>
		  <mask-model ref="showMask" btnType="1"  :titleContext="titleContext" @confirm="confirm" @cancel="cancel" :titleColoe="color" :cancelColor="color" :confirmColor="color" :maskTitle="maskTitle"></mask-model>
	   <jpSelect ref="jpSelect" :list="list" :color="color" :textColor="color" @checked="checked"  :item="item" tite="请选择切换的用户"></jpSelect>
	 <t-color-picker ref="colorPicker" :color="color1" @confirm1="confirm1"></t-color-picker>
	</view>
</template>
<script>
	import jpSelect from '../../components/jp-select/jp-select.vue';
	import maskModel from '../../components/mask-model/mask-model.vue'
	import { encryptDes, decryptDes  } from '@/common/des.js' 
	import Prompt from '../../components/zz-prompt/index.vue';
    import AmFontAwesome from '../../components/Am-FontAwesome/index.vue';
	import tColorPicker from '@/components/t-color-picker/t-color-picker.vue'
	export default {
		components: {
			 Prompt,
		     maskModel,
			 AmFontAwesome,
			 jpSelect,
			  tColorPicker
		},
		data() {
			return {
				color1: {r: 121,g: 85,b: 72,a: 1},
				show:true,
				isflag:"1",
				headTitleId:false,//是否等于物料盘点作业
				centername:"",
				//滚动数据--以数组的形式，不限制长度
				lists:["🔈V1.4.6版本更新内容如下：1.点击版本号查看更新内容。2.密码加密24位。3.美化分类ui。4.加入全局异常提示。5.添加切换用户功能登录过的用户可以直接切换。6.加入注销功能，注销回到登录页面.7.主页显示登录用户以及登录用户的其他信息。"],
				//滚动显示区域宽度
				width:'375px',
				//滚动显示区域高度，大于等于40
				height:'40px',
				//滚动显示区域背景颜色
				background:'',
				//滚动显示字幕颜色
				color:this.$kdup.color,
				//滚动速度
				speed:10,
				item: '',//选择的用户
				list: [],//用户列表
				updatecontent:"\n\n1.点击版本号查看更新内容。"+//更新内容
				"\n\n2.密码加密24位。"+
				"\n\n3.美化分类ui。"+
				"\n\n4.加入全局异常提示。"+
				"\n\n5.添加切换用户功能登录过的用户可以直接切换。"+
				"\n\n6.加入注销功能，注销回到登录页面。"+
				"\n\n7.加入生成二维码功能，可以推荐给别人或者保存起来。"+
				"\n\n8.首页点击登录用户查看客户信息和数据中心。"+
				"\n\n9.添加源单计算方式功能以及按钮上推。"+
				"\n\n10.添加多源单合并领料功能。"+
				"\n\n11.源单添加快速扫描功能扫描源单后自动添加条码。"+
				"\n\n12.添加查看权限根据不同的角色显示不同的菜单。"+
				"\n\n13.添加盘点方案单据。"+
				"\n\n14.添加领料套件欠领问题。"+
				"\n\n15.添加入库数量+扫描数量同一个物料不能超过未入库数量。"+
				"\n\n16.添加页面快捷操作左右上下滑动切换页面。",
				type:"password",
				flag:false,
				rememberPsw:false,
				version:'V2.0.5.15',//系统当前版本号V2.0.5
				form: {
					username: "",
					password: ""
				},
				
				//韩立德服务器测试地址
				url:"http://10.85.80.120:8069", 
				
				isMutipleLine: true, //是否开启大文本
				promptVisible: false, //是否关闭弹出款
				hideEyes: false,
				urlpage:"",
				titleContext:"更新提示",
				maskTitle:'',//更新内容提示
				title:"服务器地址配置",
				//样式大全
				serverconfig1:{
				color:this.$kdup.color,
				borderBottom:'1px dashed '+this.$kdup.color
				},
				denglu:{
				backgroundColor:this.$kdup.color,
				width:'60%',
				height:'50px',
				float:'right'
				},
				chonzhi:{
				backgroundColor:this.$kdup.color,
				width: '30%',
				color:'#FFFFFF',
				MarginLeft:'10px',
				},
				xhx:{
				borderBottom:' 1px dashed '+this.$kdup.color
				},
				fontcolor:{
				color:this.$kdup.color
				},
				bj:{
				backgroundColor:this.$kdup.color,
				height:'700px',
				MarginTop:'-10rpx',
				width:'100%',
		    	position:'absolute'
				},
			}
		},
		onLoad(e){ 
			if(this.$kdup.isEmpty(uni.getStorageSync("color"))){
				uni.setStorageSync("color","#55aaff")
				// #ifdef H5 
				  uni.navigateBack();
				// #endif
				// #ifdef APP-PLUS 
				  plus.runtime.restart();
				// #endif
			}
			uni.setNavigationBarColor({
				frontColor: "#ffffff",	//文字颜色
				backgroundColor: this.$kdup.color	//底部背景色
			})
			if(e.hasOwnProperty("urlpage"))
		    this.urlpage = e.urlpage;
			if(this.$kdup.isEmpty(uni.getStorageSync("rememberPsw"))){
				this.rememberPsw=false;
			}else{
				if(uni.getStorageSync("rememberPsw")==false){
					this.rememberPsw=false;
				}else{
				     this.rememberPsw=true;//解密
					 if(!this.$kdup.isEmpty(uni.getStorageSync("password"))){
						this.form.password=uni.getStorageSync("password")+"QWERTYUIOPASDFGHJKLZXCVBNM"; 
					 }
				}
			}
			this.form.username=uni.getStorageSync("username");
			uni.getNetworkType({
				complete: e => {
						let networkType = e.networkType || 'none';
						switch (networkType) {
								case 'none':
									uni.showModal({
										title: '当前无网络',
										content: '请检查您的网络链接',
										showCancel: false,
										confirmText: '取消',
										success: () => {
											this.$netWorkTypeBox = false;
										}
									});
									this.$g.show.msg('当前无网络，请检查您的网络链接');
									break;
								case '2g':
								case '3g':
								uni.showToast({
									icon: 'none',
									title: '2g,3g网络搞个锤子！',
									duration: 2000
								});
								case '4g':
								  uni.showToast({
								  	icon: 'none',
								  	title: '当前为非Wi-Fi环境，请注意流量消耗',
								  	duration: 2000
								  });
							    	break;
								case '5g':
									uni.showToast({
										icon: 'none',
										title: '当前为非Wi-Fi环境，请注意流量消耗',
										duration: 3000
									});
									break;
						}
				}
			});
		},
		mounted() {
			//检查更新
				uni.getSystemInfo({  
					success:(res) => {  
						 // console.log(res.platform);  
						//检测当前平台，如果是安卓则启动安卓更新  
					    if(res.platform=="android"){ 
							//赋值旧版本号
							this.AndroidCheckUpdate();
						}  
					}  
			  }) 
		},
		methods: {
			Colorclick(){
				this.open();
			},
			open(item) {
				// 打开颜色选择器
				this.$refs.colorPicker.open();
			},
			//颜色放回
			confirm1(e) {
			uni.setStorageSync("color",e.hex);
			// #ifdef H5 
			  uni.navigateBack();
			// #endif
            // #ifdef APP-PLUS 
              plus.runtime.restart();
            // #endif
			},
			//查看数据中心
			// centermsg(){
			// 	if(uni.getStorageSync("kdup_url")=="http://139.9.106.37:25619/K3cloud"){
			// 	this.centername='广东欧骏科技股份有限公司';
			// 	}else if(uni.getStorageSync("kdup_url")=="http://124.71.22.39:32153/k3cloud"){
			// 	this.centername="成 展|条 码 测 试";
			// 	}else if(uni.getStorageSync("kdup_url")=="http://124.71.115.202:32153/k3cloud"){
			// 	this.centername='韩立德|测试账套';
			// 	}else if(uni.getStorageSync("kdup_url")=="http://19d17543n9.imwork.net:25879/k3cloud"){
			// 	this.centername='蓝海机械总公司|条码';
			// 	}else{
			// 		this.centername='加载数据中心失败！';
			// 	}
			// },
			//生成二维码
			CreateCode(){
				var _url;
				if(this.$kdup.isEmpty(uni.getStorageSync("kdup_url"))){
				uni.setStorageSync("kdup_url",this.url)
				}
				_url=uni.getStorageSync("kdup_url");
				if(this.$kdup.isEmpty(_url)){
					uni.showToast({
						icon: 'none',
						title: '请先配置服务地址！',
						duration: 3000
					});
					return;
				}
				uni.navigateTo({
					url: '/pages/createcode/createcode?version='+this.version
				});
			},
			//查找选择的用户
			getbyname(name,url,flag){
				var userlist=JSON.parse(uni.getStorageSync("userlist"))
				if(flag==1){//查询用户
				uni.showLoading({title: '切换中',mask:true});
				for(var i=0;i<userlist.length;i++){
					if(name==userlist[i].name && url==userlist[i].url){
						 setTimeout(function () {uni.hideLoading();}, 100);
						return userlist[i];
					}
				}	
				}else{//删除用户
				uni.showLoading({title: '删除中',mask:true});
				for(var i=0;i<userlist.length;i++){
				if(name==userlist[i].name && url==userlist[i].url){
						 userlist.splice(i, 1); //删除下标为i的元素
						  break;
					}
				}
				if(userlist.length>0){
					uni.setStorageSync("userlist",JSON.stringify(userlist));
				}else{
				    uni.removeStorageSync("userlist");	
					 this.list=[];
				}
				this.form.username="";
				this.form.password="";
				uni.removeStorageSync("operateror");
				uni.removeStorageSync("username");	
				uni.removeStorageSync("password");	
				}
				 setTimeout(function () {uni.hideLoading();}, 100);
			},
		    //放回的结果集
		    checked(el,bool) {
			this.item = el
			if(bool==1){
			var userObj=this.getbyname(this.item.name,this.item.id,1);
			//这里负责切换赋值
			this.form.username=userObj.name;
			this.form.password=userObj.password;
			this.rememberPsw=!this.$kdup.isEmpty(userObj.password)?true:false;
			this.url=userObj.url;
			uni.setStorageSync("operateror", userObj.name);
			uni.setStorageSync("username", userObj.name);
			uni.setStorageSync("password", userObj.password);
			uni.setStorageSync("rememberPsw", this.rememberPsw);
			//赋值url
			this.clickPromptConfirm(userObj.url);	
			}else{
			var userObj=this.getbyname(this.item.name,this.item.id,2);
			}
			},
			//打开选择框
			tigerclick(){
				var list=[];
				if(!this.$kdup.isEmpty(uni.getStorageSync("userlist"))){
					var userlist=JSON.parse(uni.getStorageSync("userlist"))
					for(var i=0;i<userlist.length;i++){
						list[i]={
							id:userlist[i].url,
							name:userlist[i].name
						}
					}
					this.list=list;
				}
				this.$refs.jpSelect.toOpen()	
			},
			//点击版本号
			versionclick:function(){
				uni.showModal({
				  content: "版本"+this.version+"更新内容："+this.updatecontent,
				  showCancel: false,
				  buttonText: '确定',
				  success: (res) => {
				  }
				})
			},
			//查看密码
			switch1Change:function(e){
				this.flag=e.target.value;
				if(this.flag){
				 this.type="text";
				}else{
				 this.type="password";
				}
			},
			confirm:function(e){//确定按钮
			var _url = uni.getStorageSync("kdup_url");
			  var dtask = plus.downloader.createDownload( _url+"/apk/newapk.apk", {}, function ( d, status ) {
					// 下载完成  
					if ( status == 200 ) {   
						plus.runtime.install(plus.io.convertLocalFileSystemURL(d.filename),{},{},function(error){  
							uni.showToast({  
								title: '安装失败',  
								mask: false,  
								duration: 1500  
							});  
						})  
					} else {  
						 uni.showToast({  
							title: '更新失败',  
							mask: false,  
							duration: 1500  
						 });  
					}    
				});  
			 try {
				  dtask.start(); 
			var prg = 0;
			var showLoading = plus.nativeUI.showWaiting("正在下载");  //创建一个showWaiting对象 
			dtask.addEventListener('statechanged', function(
			  task,
			  status
			) {
			  // 给下载任务设置一个监听 并根据状态  做操作
			  switch (task.state) {
				case 1:
				  showLoading.setTitle("正在下载");
				  break;
				case 2:
				  showLoading.setTitle("已连接到服务器");
				  break;
				case 3:
				  prg = parseInt(
					(parseFloat(task.downloadedSize) /
					  parseFloat(task.totalSize)) *
					  100
				  );
				  showLoading.setTitle("  正在下载" + prg + "%  ");
				  break;
				case 4:                                                                                                                                                                                            
				   plus.nativeUI.closeWaiting();
					//下载完成
				  break;
			  }
			});
			  } catch (err) {
			  plus.nativeUI.closeWaiting();
			  uni.showToast({
				title: '更新失败-03',
				mask: false,
				duration: 1500
			  });
			  }									
			},
			 cancel:function(){//取消按钮
			 uni.showToast({
			 	title: '已取消',  
			 	mask: false,  
			 	duration: 1500,  
			 	icon:"none"  
			 });  
			},
			checkboxChange:function(){
			this.rememberPsw=!this.rememberPsw;
			},
			AndroidCheckUpdate:function(){  
				var _url;
				if(this.$kdup.isEmpty(uni.getStorageSync("kdup_url"))){
				uni.setStorageSync("kdup_url",this.url)
				}
				_url=uni.getStorageSync("kdup_url");
				if(this.$kdup.isEmpty(_url)){
					uni.showToast({
						icon: 'none',
						title: '请先配置服务地址！',
						duration: 3000
					});
					return;
				}
			uni.request({  
				url: _url+'/apk/new.txt',  // 如果不弹出更新提示是因为其他服务器没有更新版本文件
				method: 'GET',  
				data: {},  
				success: res => {  
					if(res.data.length<20){
					 if(res.data!=this.version){//检查网络连接状态连接WiFi，2G,3G,4G,5G
						if(plus.networkinfo.getCurrentType()==2||plus.networkinfo.getCurrentType()==3||plus.networkinfo.getCurrentType()==4||plus.networkinfo.getCurrentType()==5||plus.networkinfo.getCurrentType()==6){  
						this.maskTitle="有新的版本发布:"+res.data+"\n检测到您目前网络可用是否更新系统?\n更新内容："+this.updatecontent;
						this.$refs.showMask.show()
						}
					 }  
					 }
				},  
				fail: () => {
					
				},  
				complete: () => {}  
				});  
			},  
			tabclick() {
				var kdup_url = uni.getStorageSync("kdup_url");
				if(!this.$kdup.isEmpty(kdup_url))
					this.url = kdup_url;
				this.promptVisible = true;
			},
			passwordF_B() {
				this.hideEyes = !this.hideEyes;
			},
			//登录按钮点击
			formSubmit(e) {
				//登录验证
				if (this.$kdup.isEmpty(e.detail.value.username.trim()) || this.$kdup.isEmpty(e.detail.value.password.trim())) {
					uni.showToast({
						title: "请先输入账号和密码!",
						icon: "none",
						duration: 3000
					});
					return;
				} 
				var paw=e.detail.value.password.trim();
				if(paw.length>26){
					var str=paw.substring(0,paw.length-26)
					paw=decryptDes(str,"password");
				}
				var data = {username:e.detail.value.username.trim(),
					passwork:paw,
					isPw:0};
				uni.showLoading({title: '登录中',mask:true});
				this.$myRequest.postRequest("LoginAuth", data).then(res => {
					setTimeout(function () {uni.hideLoading();}, 100);
					if(res.data.hasOwnProperty("error") && !this.$kdup.isEmpty(res.data.error)){
						uni.showToast({
							title: res.data.error,
							duration: 3000,
							icon: "none"
						}); 
						this.form.password="";
					return;
					}
				
					//客户
					uni.setStorageSync("customer", res.data.Table[0].custname);
					//数据中心
					uni.setStorageSync("dbname", res.data.Table[0].dbname);
					uni.setStorageSync("username", e.detail.value.username.trim());
					uni.setStorageSync("rememberPsw", this.rememberPsw);
					if(this.rememberPsw){             //加密
						uni.setStorageSync("password",encryptDes(paw,"password"));
					}else{
						uni.removeStorageSync("password");
					}
					//切换用户记录登录用户
					var obj={
					name:e.detail.value.username.trim(),
					password:this.rememberPsw==true?encryptDes(paw,"password")+"QWERTYUIOPASDFGHJKLZXCVBNM":"",
					url:uni.getStorageSync("kdup_url")
					}
					//第一次为空的时候
					if(this.$kdup.isEmpty(uni.getStorageSync("userlist"))){
						this.list.push(obj)
						uni.setStorageSync("userlist",JSON.stringify( this.list));
					}else{
					//不为空则修改
						var userlist=JSON.parse(uni.getStorageSync("userlist"));
						var j=0;
						for(var i=0;i<userlist.length;i++){
							//找到同一台服务器下的同一个用户
							if(obj.name==userlist[i].name && obj.url==userlist[i].url){
								userlist[i]=obj;
								uni.setStorageSync("userlist",JSON.stringify(userlist));
								j++;
							}
						}
						//说明没有登录过继续添加对象
						if(j!=1){
							userlist.push(obj);
							uni.setStorageSync("userlist",JSON.stringify(userlist));
						}
					}
					 this.$kdup.userInfo = res.data.Table[0];
					 uni.setStorageSync("userInfo",JSON.stringify(this.$kdup.userInfo));
					 if(this.$kdup.isEmpty(this.urlpage))
						this.urlpage = '/pages/bill/bill';
					if(this.urlpage == "/pages/bill/bill" || this.urlpage == "/pages/index/index"){
						// reLaunch
						uni.reLaunch({
						   url:this.urlpage
						});
					}else{
						// reLaunch
						uni.reLaunch({
							url:'/pages/bill/bill'
						}); 
					}
					uni.showToast({
						title: "登录成功",
						duration: 1000
					}); 
				}); 
			},
			//清空表单
			formReset: function(e) {
				// console.log('清空数据')
			},
			/**
			 * 服务器配置弹出框确定
			 */
			clickPromptConfirm(val) {
				uni.setStorageSync("kdup_url", val);
			},
			//当用户名没有值的时候清空密码
			removePws:function(e){
				if(this.isEmpty(e.detail.value)){
					this.form={
					username: "",
					password: ""
				}
				}
			},
			/*
			 *判断非空
			 *
			*/
			 isEmpty:function(val){
			    if(val == null)return true;
			    if(val == undefined || val == 'undefined') return true;
			    if(val == "") return true;
			    if(val.length == 0) return true;
			    if(!/[^(^\s*)|(\s*$)]/.test(val)) return true;
			    return false;
			}
		}
	}
</script>
<style lang="scss" >
	  .input1 {
            //text-indent:25px;
			//background: url('')no-repeat;
	        background-position:left;
	        }
	  .input2 {
	      //text-indent:25px;
	      //background: #fff url('') no-repeat;
	      background-position:left;
	      }

	uni-modal .uni-modal__bd{   
	    white-space: pre-wrap;  
	}
	#editor{
	width: 100%;
	height: 55px;
	}
	button{
		display: inline-block;
	}
	.switch{
     float:left;
	 position: relative;
	 z-index: 1;
	 }
	.version1{
	position: relative;
	left: 15%;
	}
	.serverconfig {
		margin-top: 30px;
		width: 102px;
	}
	.serverconfig1 {
		margin-top: -25px;
		float: right;
		width: 85px;
	}
	.serverconfig2 {
		color: #555500;
		float: left;
		margin-top: 30px;
		border-bottom: 1px dashed    #555500;
	}
	.login-form {
		margin: -9px 20px 0 20px;
		height: 320px;
		border-radius:20px;
		background-color: #ffffff;
		box-shadow: 0 20px 700px #9B9B9B;
		padding: 40px;
	}
	.form-input input {
		/* background: #ffffff; */
		height: 40px;
		margin: 20px 0;
		padding: 0 10px;
	}
	.login-img {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 110px;
		margin-top: 100rpx;
	}
	.owl-login {
		width: 211px;
		height: 108px;
		background-image: url('');
		background-repeat: no-repeat;
		background-size: 100%;
		position: absolute;
	}
	.owl-login .hand {
		width: 34px;
		height: 34px;
		-webkit-border-radius: 40px;
		border-radius: 40px;
		background-color: #472d20;
		transform: scaleY(0.6);
		transition: 0.3s ease-out;
		position: absolute;
		left: 14px;
		bottom: -8px;
	}
	.owl-login .hand.hand-r {
		left: 170px;
	}
	.owl-login .arms {
		top: 58px;
		position: absolute;
		width: 100%;
		height: 41px;
		overflow: hidden;
	}
	.owl-login .arms .arm {
		width: 40px;
		height: 65px;
		position: absolute;
		left: 20px;
		top: 40px;
		background-image: url("");
		background-size: 100%;
		transition: 0.3s ease-out;
		transform: rotate(-20deg);
	}
	.owl-login .arms .arm.arm-r {
		transform: rotate(20deg) scaleX(-1);
		left: 158px;
	}
	.owl-login.password .hand {
		transform: translateX(42px) translateY(-15px) scale(0.7);
	}
	.owl-login.password .hand.hand-r {
		transform: translateX(-42px) translateY(-15px) scale(0.7);
	}
	.owl-login.password .arms .arm {
		transform: translateY(-40px) translateX(40px);
	}
	.owl-login.password .arms .arm.arm-r {
		transform: translateY(-40px) translateX(-40px) scaleX(-1);
	}
  /*按钮特效*/
  .wrapper{
  }
     .wrapper span{
         position: absolute;
         display: block;
     }
     .wrapper span:nth-child(1){
         height: 5px;
         width:200px;
         top:0px;
         left:-200px;
         background: linear-gradient(to right, rgba(0,0,0,0), #ffffff);
         border-top-right-radius: 1px;
         border-bottom-right-radius: 1px;
         animation: span1 2s linear infinite;
         animation-delay: 1s;
     }
	 button span:nth-child(1){
	     height: 5px;
	     width:200px;
	     top:0px;
	     left:-200px;
	     background: linear-gradient(to right, rgba(0,0,0,0), #ffffff);
	     border-top-right-radius: 1px;
	     border-bottom-right-radius: 1px;
	     animation: span1 2s linear infinite;
	     animation-delay: 1s;
	 }
	 @keyframes span1{
	     0%{
	         left:-200px
	     }
	     100%{
	         left:200px;
	     }
	 }
	 button span:nth-child(2){
	     height: 70px;
	     width: 5px;
	     top:-70px;
	     right:0px;
	     background: linear-gradient(to bottom, rgba(0,0,0,0), #ffffff);
	     border-bottom-left-radius: 1px;
	     border-bottom-right-radius: 1px;
	     animation: span2 2s linear infinite;
	     animation-delay: 2s;
	 }
	 @keyframes span2{
	     0%{
	         top:-70px;
	     }
	     100%{
	         top:70px;
	     }
	 }
	 button span:nth-child(3){
	     height:5px;
	     width:200px;
	     right:-200px;
	     bottom: 0px;
	     background: linear-gradient(to left, rgba(0,0,0,0), #ffffff);
	     border-top-left-radius: 1px;
	     border-bottom-left-radius: 1px;
	     animation: span3 2s linear infinite;
	     animation-delay: 3s;
	 }
	 @keyframes span3{
	     0%{
	         right:-200px;
	     }
	     100%{
	         right: 200px;
	     }
	 }
	 button span:nth-child(4){
	     height:70px;
	     width:5px;
	     bottom:-70px;
	     left:0px;
	     background: linear-gradient(to top, rgba(0,0,0,0), #ffffff);
	     border-top-right-radius: 1px;
	     border-top-left-radius: 1px;
	     animation: span4 2s linear infinite;
	     animation-delay: 4s;
	 }
	 @keyframes span4{
	     0%{
	         bottom: -70px;
	     }
	     100%{
	         bottom:70px;
	     }
	 }
	 button:hover{
	     transition: all .5s;
	     box-shadow: 0px 3px 10px rgba(0,0,0,.4);
	 }
	 button:hover span{
	     animation-play-state: paused;
	 }
</style>
